import UserSession from "@/UserSession";
import { FetchDialogInfo, updateDialogName } from "@/services/dialog";
import { formEdit } from "@/services/formInteraction";
import { Button, Form, Icon, message,Input, Modal } from "antd";
import React from "react";

class EditDialogName extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      editName:false,
    }
  }

  componentDidMount() {
	}

  checkName = () => {
    const { form:{validateFields} } = this.props;
    validateFields((error,values) => {
      if(!error){
        this.doSaveName(values)
      }
    })
	};

  doSaveName = async (values) => {
    const { categoryId, formId} = this.props;
    const res = await formEdit({
      name:values.formName,
      id:formId,
      categoryId
    })
    if (!res.code) {
      this.setState({ editName: false, }, () => {
        message.info(res.msg);
        this.props.refreshName()
      });
    }
  }

  render(){
    const { editName } = this.state;
    const { form:{getFieldDecorator},name ,openMoveClass} = this.props;
    return (
      <span>
        <span>
          {name}
          {/* 系统知识库不显示编辑多轮名称 */}
          {
            !UserSession.isSystemKnowledge() && (
              <Icon
                type={"form"}
                onClick={() => this.setState({ editName: true })}
                size={16}
                style={{ fontSize: 16, fontWeight: 400, color: '#333333',marginLeft: 10 }}
              />
            )
          }

          {/* 系统知识库不显示移动分类 */}
          {!UserSession.isSystemKnowledge() && (
            <Icon
              type='unordered-list'
              onClick={openMoveClass}
              style={{ fontSize: 16, fontWeight: 400, color: '#333333',marginLeft: 10, cursor: "pointer" }}
            />
          )}
        </span>

        <Modal
          title='修改名称'
          visible={editName}
          onCancel={() => this.setState({ editName: false })}
          destroyOnClose
          onOk={this.checkName}
        >
          <Form >
            <Form.Item label={"名称"}>
              {getFieldDecorator("formName", {
                rules: [
                  { required: true, message: "请输入多轮对话名称", },
                ],
                initialValue: name,
              })(
                <Input placeholder='请输入多轮对话名称' maxLength={20} />
              )}
            </Form.Item>
          </Form>
        </Modal>
      </span>
    )
  }
}

export default Form.create()(EditDialogName)